<template>
    <div>
        <h2>基本设置</h2>
        <Form ref="form" :model="data" :rules="rules" label-position="top" class="ivu-mt">
            <Row type="flex" :gutter="48">
<!--                <Col v-bind="grid1">-->
<!--                    <FormItem label="头像" prop="avatar">-->
<!--                        <Avatar :src="data.avatar" class="setting-account-info-avatar" shape="square" />-->
<!--                        <Upload action="//jsonplaceholder.typicode.com/posts/" class="ivu-mt ivu-mb">-->
<!--                            <Button icon="md-camera">修改头像</Button>-->
<!--                        </Upload>-->
<!--                    </FormItem>-->
<!--                </Col>-->
                <Col v-bind="grid2">
                    <FormItem label="昵称" prop="nickname">
                        <Input v-model="data.nickname" placeholder="请输入昵称" />
                    </FormItem>
                    <FormItem label="邮箱" prop="email">
                        <Input v-model="data.email" placeholder="请输入邮箱" />
                    </FormItem>
                    <FormItem label="所属单位" prop="orgName">
                        <Input v-model="data.orgName" placeholder="请输入单位" />
                    </FormItem>
                    <FormItem label="居住地" prop="address">
                        <Input style="width:260px" v-model="data.address" type="textarea" />
                    </FormItem>
                    <FormItem>
                        <Button  @click="handleSubmit">更新基本信息</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
    import {accountUpdate} from "@/api/systemSet";

    export default {
        data () {
            return {
                grid1: {
                    xl: {
                        span: 12,
                        order: 2
                    },
                    lg: {
                        span: 24,
                        order: 1
                    },
                    md: {
                        span: 24,
                        order: 1
                    },
                    sm: {
                        span: 24,
                        order: 1
                    },
                    xs: {
                        span: 24,
                        order: 1
                    }
                },
                grid2: {
                    xl: {
                        span: 12,
                        order: 1
                    },
                    lg: {
                        span: 24,
                        order: 2
                    },
                    md: {
                        span: 24,
                        order: 2
                    },
                    sm: {
                        span: 24,
                        order: 2
                    },
                    xs: {
                        span: 24,
                        order: 2
                    }
                },
                data: {
                    // avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                  nickname: '',
                   email: '',
                  address: '',
                  orgName:'',
                },
                rules: {

                  email: [
                        { required: false, type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
                    ],
                  address: [
                        { max:250, message: '请输入家庭住址', trigger: 'blur' }
                    ],
                  nickname: [
                        { max:50, message: '昵称不能超过50个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        props:{
          info:{
            type:Object,
            default:()=>{
              return {}
            }
          }
        },
        watch:{
          info:{
            handler:function (newData,oldData){
              if(newData==oldData) return
              this.init();
            },
            deep:true
          }
        },
        mounted() {
          this.init();
        },
      methods: {
            init(){
              this.data={...this.info}
            },
           async update(){
              return await  accountUpdate({...this.data});
           },
            handleSubmit () {
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        let res =await this.update();
                        if(res.code==0){
                          this.$Message.success('信息更新成功!');
                        }else{
                          this.$Message.error('信息更新失败!');
                        }

                    }
                });
            }
        }
    }
</script>
<style lang="less">
    .setting-account-info{
        &-avatar{
            width: 90px;
            height: 90px;
        }
    }
</style>
